<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Flipping a sprite sheet</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>

		<!-- We also provide hosted minified versions of all CreateJS libraries.
		  http://code.createjs.com -->


	<script>

	var imgSeq = new Image();		//bmp of the sprite sheet
	var results;				//frame data to be displayed
	var imageSrc = "assets/runningGrantSmall.png";

	function init() {
		document.getElementById('origImage').src = imageSrc;

		//wait for the image to load
		imgSeq.onload = handleImageLoad;
		imgSeq.src = imageSrc;
	}

	function handleImageLoad() {
		// create a new sprite sheet from the loaded image, and define the animation sequences in it.
		// for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
		// will play back frames 0 to 19 inclusive.
		var spriteSheet  = new createjs.SpriteSheet(
				{"animations":
					{
					"run": [0, 15]},
					"images": ["assets/runningGrantSmall.png"],
					"frames":
					{
						"regX": 0,
						"regY": 0,
						"width": 51,
						"height": 90,
						"count": 16
					}
				}
		);

		// append flipped frames to the sprite sheet. The 2nd, 3rd, and 4th params indicate whether
		// to add horizontal, vertical, and both horizontally & vertically flipped frames.
		createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

		// add the newly created sprite sheet to the bottom of this document. We're accessing a private property "_images"
		// for demonstration purposes only.
		document.getElementById("content").appendChild(spriteSheet._images[1]);
	}

	</script>
</head>


<body onload="init();" bgcolor="#FFFFFF">
	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> SpriteSheet Flip Sample</h1>
	    <p>Tests using the <strong>SpriteSheetUtils.flip()</strong> method to extend a loaded sprite sheet with horizontally flipped frames.
		    The top row of frames is from the original sprite sheet, the bottom is the generated frames.
	    </p>
	</header>

	<div class="content">
		<div id="content" style="margin-top: 90px; margin-left: 70px; font-weight: bold;">
			Original sprite sheet<br/><br/>
			<img id="origImage"><br/><br/><br/>
			Appended sprites<br/><br/>
		</div>
	</div>
</body>
</html>
